<template>
  <div class="timeline" id="attendance">
    <ul class="timeline-list" v-if="PrintingDatePrintingDate.length > 0">
      <li class="timeline-item" v-for="(item, index) in PrintingDatePrintingDate" :key="index">
        <div class="timeline-item_tail"></div>
        <div class="timeline-item_node"></div>
        <div class="timeline-item_wrapper">
          <div class="timeline-item_timestamp">
            {{ item.dkfsText }} <span>{{ item.dktime }}</span>
            <span class="Normalclock" :style="{ color: item.dkztColor, borderColor: item.dkztColor }"
              >{{ item.dkztText }} <span v-if="item.dkmx">{{ item.dkmx }}</span></span
            >
          </div>
        </div>
      </li>
    </ul>
    <div v-else style="text-align: center">
      <img src="@/assets/images/homeImages/download.png" alt="" />
      <p style="text-align: center; font-size: 13px; color: #909399">暂无打卡明细</p>
    </div>
  </div>
</template>

<script>
import { currentMonthDays } from "@/util/util";
export default {
  data() {
    return {
      PrintingDatePrintingDate: [],
      STATUS_COLOR: {
        5: "#3ABA67",
        6: "#EB3939",
        7: "#EFAF61",
        8: "#9E5BE9",
        9: "#999999",
        10: "#498AF6",
        11: "#EFAF61",
      },
      STATUS_OBJ: {
        5: "正常打卡",
        6: "迟到",
        7: "早退",
        8: "旷工",
        9: "休息",
        10: "请假",
        11: "缺卡",
      },
    };
  },
  methods: {
    //获取日打卡明细
    onGetPrintingDate() {
      this.$api.publicApi
        .GetPrintingDate({ CreateTime: currentMonthDays() })
        .then((res) => {
          if (res.data.status == 200) {
            if (res.data.data.length > 0) {
              this.PrintingDatePrintingDate = res.data.data.splice(0, 2);
            } else {
              this.PrintingDatePrintingDate = [];
            }
            let newData = [];
            this.PrintingDatePrintingDate.forEach((ite) => {
              let item = JSON.parse(JSON.stringify(ite));
              item.dktime = new Date(item.dktime).toLocaleString();
              item.dkfsText = item.dkfs == 0 ? "考勤机打卡" : item.dkfs == 1 ? "坐班打卡" : item.dkfs == 2 ? "外勤打卡" : "";
              item.dkztColor = this.STATUS_COLOR[item.dkzt];
              item.dkztText = this.STATUS_OBJ[item.dkzt];
              item.dkmxText = item.dkmx ? `${item.dkzt === 6 ? "迟到" : "早退"}${item.dkmx}${item.timeType == 1 ? "分钟" : "小时"}` : "";
              newData.push(item);
            });
            this.PrintingDatePrintingDate = newData;
          }
          this.loading.close();
        })
        .catch(() => {
          this.loading.close();
        });
    },
  },
  mounted() {
    this.loading = this.$loading({
      target: document.getElementById("attendance"),
      text: "加载中...",
      customClass: "loading",
    });
    this.onGetPrintingDate();
  },
};
</script>

<style lang="less" scoped>
:deep(.loading){
  .el-loading-spinner {
    p {
      text-align: center;
    }
  }
}
.timeline {
  padding: 20px 10px;
}
.timeline-list {
  margin: 0;
  font-size: 14px;
  list-style: none;
}
.late {
  display: inline-block;
  padding: 0px 4px;
  height: 18px;
  border: 1px solid #e0413f;
  text-align: center;
  line-height: 16px;
  color: #e0413f;
  border-radius: 4px;
  font-size: 12px;
}
.Normalclock {
  display: inline-block;
  padding: 0px 4px;
  height: 18px;
  border: 1px solid #5dac78;
  text-align: center;
  line-height: 16px;
  color: #5dac78;
  font-size: 12px;
  border-radius: 4px;
}
.timeline-item:last-child .timeline-item_tail {
  display: none;
}
.timeline-item {
  position: relative;
  padding-bottom: 20px;
}
.timeline-item_tail {
  position: absolute;
  left: 4px;
  height: 100%;
  border-left: 2px solid #e4e7ed;
}

.timeline-item_node {
  position: absolute;
  background-color: #e4e7ed;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 1px solid #2395ff;
  // #d9e5fa
}
.timeline-item_wrapper {
  position: relative;
  padding-left: 20px;
  top: 0px;
}
.timeline-item_timestamp {
  margin-bottom: 8px;
  padding-top: 0px;
  color: #333333;
  line-height: 1;
  font-size: 13px;
}
.delclass {
  color: #0379fb;
  font-weight: normal;
  cursor: pointer;
}
.delclass:hover {
  color: #2395ff;
}
</style>
